<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{surplusList}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected: status ==='all'}" href="javascript:;"  @click="all">全部</a>
      </li>
      <li>
        <a  :class="{selected: status ==='no'}" @click="no " href="javascript:;"  >未完成</a>
      </li>
      <li>
        <a  :class="{selected: status ==='yes'}" href="javascript:;"  @click="yes ">已完成</a>
      </li>
    </ul>
    <button class="clear-completed"  @click="clearList">清除已完成</button>
  </footer>
</template>

<script>
import { mapState, mapMutations,mapGetters}from  'vuex'
export default {
methods:{
  ...mapMutations(['clearList','setStatus']),
all(){
  this.setStatus('all')
  // console.log(this.status)
},
yes(){
  this.setStatus('yes')
},
no(){
  this.setStatus('no')
}
},
computed:{
  ...mapState(['status']),

  ...mapGetters(['surplusList'])
}
}
</script>